<template>
  <div class="homeWrap">
    <van-search
      v-model="searchValue"
      @focus="searchFocus"
      placeholder="请输入搜索关键词"
    />
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
        <van-swipe-item
          ><img class="swipe_img" src="./../../../assets/images/swipe01.jpg"
        /></van-swipe-item>
        <van-swipe-item
          ><img class="swipe_img" src="./../../../assets/images/swipe02.jpg"
        /></van-swipe-item>
        <van-swipe-item
          ><img class="swipe_img" src="./../../../assets/images/swipe03.jpg"
        /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="notice">
      <div class="notice_header">
        <span>公告通知:</span>
        <span class="notice_more" @click.stop="toMoreNotice">查看更多></span>
      </div>
      <van-notice-bar left-icon="volume-o" :scrollable="false">
        <van-swipe
          vertical
          v-if="noticeList"
          class="notice-swipe"
          :autoplay="4000"
          :show-indicators="false"
        >
          <van-swipe-item
            v-for="(item, index) in noticeList"
            :key="index"
            @click="toNoticeDetail(item)"
            >{{ item.title }}</van-swipe-item
          >
        </van-swipe>
        <van-swipe
          vertical
          v-else
          class="notice-swipe"
          :autoplay="4000"
          :show-indicators="false"
        >
          <van-swipe-item>暂且未发布公告</van-swipe-item>
          <van-swipe-item>暂且未发布公告</van-swipe-item>
        </van-swipe>
      </van-notice-bar>
    </div>
    <div class="homeWrap_content">
      <van-tabs type="card">
        <van-tab title="全部"><home-all-post></home-all-post></van-tab>
        <van-tab title="热门"><home-hot-post></home-hot-post></van-tab>
      </van-tabs>
    </div>
    <van-overlay :show="searchShow" @click="searchShow = false" />
    <div class="goTop" @click="backTop" v-if="btnFlag">
      <van-icon name="arrow-up" size="0.2rem" class="topIcon" />
    </div>
  </div>
</template>

<script>
import { getNotice } from "@/views/api/api.js";
import homeAllPost from "./components/homeAllPost";
import homeHotPost from "./components/homeHotPost";
export default {
  components: {
    homeAllPost,
    homeHotPost,
  },
  data() {
    return {
      noticeList: [],
      searchValue: "",
      searchShow: false,
      scrollTop: 0,
      btnFlag: false,
    };
  },
  computed: {},
  mounted() {
    // window.addEventListener("scroll", this.scrollToTop, true);
  },
  // destroyed() {
  //   window.removeEventListener("scroll", this.scrollToTop);
  // },
  created() {
    this.init();
    // window.οnscrοll = function () {
    //   console.log(document.documentElement.scrollTop);
    //   //鼠标滚轮滚动距离超过10像素时，回到顶部按钮才显示
    //   if (document.documentElement.scrollTop > 10) {
    //     console("111");
    //     this.btnFlag = true;
    //   } else {
    //     console("111");
    //     this.btnFlag = false;
    //   }
    // };
  },
  methods: {
    init() {
      // 获取公告
      let params = {
        pageSize: 3,
        pageIndex: 1,
      };
      getNotice(params).then((res) => {
        if (res.data.code) {
        } else {
          this.noticeList = res.data.Info;
        }
      });
    },
    toNoticeDetail(item) {
      this.$router.push({
        name: "noticeDetail",
        query: { noticeID: item._id },
      });
    },
    toMoreNotice() {
      this.$router.push({
        name: "moreNotice",
      });
    },
    searchFocus() {
      console.log("111");
      // this.searchShow = true
      this.$router.push({
        name: "search",
      });
    },
    backTop() {
      if (document.documentElement.scrollTop > 0) {
        document.documentElement.scrollTop = 0;
      }
    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      console.log("1111");
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      console.log("222", window.scrollY);
      if (that.scrollTop > 10) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },
  },
};
</script>
<style>
.homeWrap_content .van-tabs__nav--card .van-tab.van-tab--active {
  background-color: #1989fa;
}
.homeWrap_content .van-tabs__nav--card {
  border: 1px solid #1989fa;
}
.homeWrap_content .van-tab {
  color: black;
}
.homeWrap_content .van-tabs__nav--card .van-tab {
  border-right: 0 solid #1989fa;
}
</style>
<style scoped>
.swipe_img {
  width: 100%;
  height: 150px;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
  text-align: left;
}
.homeWrap_content {
  margin-top: 15px;
}
.notice_header {
  /* background-color: #fffbe8; */
  padding: 5px 16px;
  display: flex;
  justify-content: space-between;
}
.notice_more {
  color: #1989fa;
}
.goTop {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  position: fixed;
  right: 20px;
  bottom: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
